<template>
    <div class="home">
        <header @click="quit" style="cursor:pointer">退出</header>
        <el-tabs v-model="activeName">
            <el-tab-pane label="用户管理" name="first">
                <div>
                    <el-button type="primary" @click='allCheckUser' v-if="!isAll">全选</el-button>
                    <el-button type="primary" @click='allCheckUser' v-if="isAll">取消</el-button>
                    <el-button type="danger" @click="deleteCheckUser" v-if="selectUser.length !== 0">删除</el-button>
                    <span style="margin-left:10px">共计 {{tableData_user.length}} 个用户</span>
                    <span style="margin-left:10px">选中 {{selectUser.length}} 个用户</span>

                </div>
                <br>
                <el-table stripe :data="tableData_user" border @selection-change="userSelectChange" :cell-style="{'text-align':'center'}"
                    ref="multipleTable1">
                    <el-table-column type='selection'> </el-table-column>
                    <el-table-column prop="id" label="ID">
                    </el-table-column>
                    <el-table-column prop="name" label="名称">
                    </el-table-column>
                    <el-table-column prop="username" label="账号">
                    </el-table-column>
                    <el-table-column prop="password" label="密码">
                    </el-table-column>
                    <el-table-column prop="avator" label="头像">
                        <template slot-scope="scope">
                            <img :src="BaseUrl+scope.row.avator" alt=""
                                style="width:60px;height:60px;border-radius:50%;object-fit:cover">
                        </template>
                    </el-table-column>
                    <el-table-column label="操作">
                        <!-- <template slot="header">
                            <el-input v-model="search" size="mini" placeholder="输入名字关键字搜索" />
                        </template> -->

                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="deleteUser(scope.row.id)">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="消息管理" name="second">
                <div>
                    <el-button type="primary" @click='allCheckMsg' v-if="!isAll1">全选</el-button>
                    <el-button type="primary" @click='allCheckMsg' v-if="isAll1">取消</el-button>
                    <el-button type="danger" @click="deleteCheckMsg" v-if="selectMsg.length !== 0">
                        删除</el-button>

                    <span style="margin-left:10px">共计 {{tableData.length}} 条消息</span>
                    <span style="margin-left:10px">选中 {{selectMsg.length}} 条消息</span>
                </div>
                <br>
                <el-table stripe :data="tableData" border @selection-change="msgSelectChange"
                    :cell-style="{'text-align':'center', 'white-space':'pre'}" ref="multipleTable2">
                    <el-table-column type='selection'> </el-table-column>
                    <el-table-column prop="id" label="ID">
                    </el-table-column>
                    <el-table-column prop="name" label="名称">
                    </el-table-column>
                    <el-table-column prop="avator" label="头像">
                        <template slot-scope="scope">
                            <img :src="BaseUrl+scope.row.avator" alt=""
                                style="width:60px;height:60px;border-radius:50%;object-fit:cover">
                        </template>
                    </el-table-column>
                    <el-table-column prop="message" label="消息" style=" white-space:pre;">
                        <template slot-scope="scope">
                            <img v-if="scope.row.type=='img'" :src="BaseUrl+scope.row.message"
                                alt="" style="width:60px;max-height:180px;object-fit:cover">
                            <span v-if="scope.row.type=='text'">{{scope.row.message}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="time" label="发送时间" sortable>
                    </el-table-column>

                    <el-table-column label="操作">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="deleteMessage(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="视频日志查看" name="third">
                <el-table stripe :data="videoLogList" border 
                    :cell-style="{'text-align':'center', 'white-space':'pre'}" ref="multipleTable2">
                    <el-table-column prop="name" label="昵称">
                    </el-table-column>
                    <el-table-column prop="avator" label="头像">
                        <template slot-scope="scope">
                            <img :src="BaseUrl+scope.row.avator" alt=""
                                style="width:60px;height:60px;border-radius:50%;object-fit:cover">
                        </template>
                    </el-table-column>
                    <el-table-column prop="content" label="内容" style=" white-space:pre;">
                    </el-table-column>
                    <el-table-column prop="time" label="时间" sortable>
                    </el-table-column>
                    <el-table-column prop="type" label="类型" sortable>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script type="text/javascript">
import IP, { BaseUrl } from '../../Api/config'
export default {
    name: 'home-mgr',
    components: {
    },

    props: {},

    data() {
        return {
            tableData: [],
            tableData_user: [],
            videoLogList:[],
            activeName: "first",
            isAll: false,
            isAll1: false,
            selectUser: [],
            selectMsg: [],
            search1: '',
            search: "",
            BaseUrl
        }
    },

    watch: {},

    created() {
        this.getList();
        this.getMessageList();
        this.getVideoLogList();
        this.condition = process.env.NODE_ENV;
    },

    mounted() {
    },

    methods: {
        getList() {
            this.$http.get('/mgr/userList').then((data) => {
                this.tableData_user = data || [];
            })
        },

        getMessageList() {
            this.$http.get('/mgr/messageList').then((data) => {
                this.tableData = data || [];
            })
        },

        getVideoLogList() {
            this.$http.get('/getVideoLog').then((data) => {
                this.videoLogList = data || [];
            })
        },

        deleteMessage(ids) {
            let is = confirm("是否删除");
            if (!is) return
            if (typeof ids == 'object') {
                ids = ids.join(',')
            } else {
                ids = String(ids)
            }
            this.$http.delete('/delete/message', { ids }).then(() => {
                this.$msg.success({
                    message: "删除成功",
                    showClose: true,
                    duration: 1000
                });
                this.getMessageList();
            })
        },

        deleteUser(ids) {
            let is = confirm("是否删除");
            if (!is) return
            if (typeof ids == 'object') {
                ids = ids.join(',')
            } else {
                ids = String(ids)
            }
            this.$http.delete('/delete/user', { ids }).then(() => {
                this.$msg.success({
                    message: "删除成功",
                    showClose: true,
                    duration: 1000
                });
                this.getList();
            })
        },

        userSelectChange(val) {
            if (val.length == this.tableData_user.length) {
                this.isAll = true;
            } else {
                this.isAll = false;
            }

            this.selectUser = val;
        },
        msgSelectChange(val) {

            if (val.length == this.tableData.length) {
                this.isAll1 = true;
            } else {
                this.isAll1 = false;
            }

            this.selectMsg = val;
        },

        deleteCheckMsg() {
            if (this.selectMsg.length == 0) return this.$msg.warning({
                message: "不能为空",
                showClose: true,
                duration: 1000
            });
            let ids = this.selectMsg.map((item) => {
                return item.id
            })
            this.deleteMessage(ids);
        },

        deleteCheckUser() {
            if (this.selectUser.length == 0) return this.$msg.warning({
                message: "不能为空",
                showClose: true,
                duration: 1000
            });
            let ids = this.selectUser.map((item) => {
                return item.id
            })
            this.deleteUser(ids)

        },

        allCheckUser() {
            this.isAll = !this.isAll;
            if (!this.isAll) {
                this.$refs.multipleTable1.clearSelection();
                return
            }
            this.$refs.multipleTable1.toggleAllSelection();
        },
        allCheckMsg() {
            this.isAll1 = !this.isAll1;
            if (!this.isAll1) {
                this.$refs.multipleTable2.clearSelection();
                return
            }
            this.$refs.multipleTable2.toggleAllSelection();
        },

        quit() {
            this.$router.replace('/mgr/login');
            localStorage.removeItem('userInfo')
        }
    }
}
</script>

<style lang="less" scoped>
.home {
    padding: 50px;
    /deep/ .el-table .cell {
        white-space: pre-wrap;
    }
}
</style>